<template>
    <div class="wrapper">
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">信用卡</div>
                    </div>
                    <div class="dia">
                        <div class="">
                            <input type="text" v-model="list.creditCardDrate" class="inp" @focus="InpFocus(1)" />
                            <!-- {{list.agentPosChannelRateConfigInf.creditCardDrate}} -->
                        </div>
                        <div class="">
                            %
                        </div>

                    </div>
                </div>
                <div class="line_botom" :class="pitch==1?'pitch_line':''">

                </div>
            </div>
        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">云闪付</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.ysfRate" class="inp" @focus="InpFocus(2)" />
                        %
                    </div>
                </div>
                <div class="line_botom" :class="pitch==2?'pitch_line_a':''">

                </div>
            </div>

        </div>
        <!-- <div class="dis">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #FF8602;">

						</div>
						<div class="wx_box">借记卡封顶</div>
					</div>
					<div class="dia">
						<input type="text" v-model="dcardCap" class="inp" @focus="InpFocus(3)"/>
						元
					</div>
				</div>
				<div class="line_botom" :class="pitch==3?'pitch_line_b':''">

				</div>
			</div>

		</div> -->
        <!-- <div class="dis">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #ff5555;">

						</div>
						<div class="wx_box">借记卡</div>
					</div>
					<div class="dia">
						<input type="text" v-model="debitCardDrate" class="inp" @focus="InpFocus(4)" />
						%
					</div>
				</div>
				<div class="line_botom" :class="pitch==4?'pitch_line_c':''">

				</div>
			</div>

		</div> -->
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">刷卡D0成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.casRate" class="inp" @focus="InpFocus(5)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==5?'pitch_line_d':''">

                </div>
            </div>

        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">提现费率成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.withdrawRateCost" class="inp" @focus="InpFocus(6)" />
                        %
                    </div>
                </div>
                <div class="line_botom" :class="pitch==6?'pitch_line_e':''">

                </div>
            </div>

        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">微信/支付宝费率</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.wxRate" class="inp" @focus="InpFocus(4)" />
                        %
                    </div>
                </div>
                <div class="line_botom" :class="pitch==4?'pitch_line_e':''">

                </div>
            </div>

        </div>

        <!-- <div class="dis">
			<div class="main">
				<div class="dia" style="justify-content: space-between;">
					<div class="dia">
						<div class="line" style="background-color: #ff5555;">
		
						</div>
						<div class="wx_box">流量卡返现金额</div>
					</div>
					<div class="dia">
						<input type="text" v-model="backAmount" class="inp" @focus="InpFocus(7)"/>
						元
					</div>
				</div>
				<div class="line_botom" :class="pitch==7?'pitch_line_f':''">
		
				</div>
			</div>
		
		</div> -->
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">优惠贷记卡成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.ccardTrateYx" class="inp" @focus="InpFocus(7)" />
                        %
                    </div>
                </div>
                <div class="line_botom" :class="pitch==7?'pitch_line_f':''">

                </div>
            </div>

        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">支付宝大额</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.largeZfbRate" class="inp" @focus="InpFocus(8)" />
                        %
                    </div>
                </div>
                <div class="line_botom" :class="pitch==8?'pitch_line_g':''">

                </div>
            </div>

        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">电签首次流量卡成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.firstSimCost" class="inp" @focus="InpFocus(9)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==9?'pitch_line_h':''">

                </div>
            </div>

        </div>
        <div class="dis" v-if="list.dqRepeShowStatus==0">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">电签是否开启多次流量卡</div>
                        <div class="dia flashlight" @click="torchlight(10)">
                            <van-field v-model="repeSimStatusName" label="" input-align="right" placeholder="请选择"
                                :disabled="true" :clickable="true" :is-link="true" @click="torchlight(10)" />
                            <!-- <input type="text" v-model="list.djFirstSimCost" class="inp" @focus="InpFocus(9)" />
                            元 -->
                        </div>
                    </div>

                </div>
                <div class="line_botom" :class="pitch==10?'pitch_line_h':''">

                </div>
            </div>
        </div>
        <div class="dis" v-if="list.repeSimStatus==0&&list.dqRepeShowStatus==0">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">电签多次流量卡成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.repeSimCost" class="inp" @focus="InpFocus(11)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==11?'pitch_line_i':''">

                </div>
            </div>

        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">大机首次流量卡成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.djFirstSimCost" class="inp" @focus="InpFocus(12)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==12?'pitch_line_h':''">

                </div>
            </div>

        </div>
        <div class="dis" v-if="list.djRepeShowStatus==0">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">大机是否开启多次流量卡</div>
                        <div class="dia flashlight" @click="todjRepeSimStatus(13)">
                            <van-field v-model="djRepeSimStatusName" label="" input-align="right" placeholder="请选择"
                                :disabled="true" :clickable="true" :is-link="true" @click="todjRepeSimStatus(13)" />
                            <!-- <input type="text" v-model="list.djFirstSimCost" class="inp" @focus="InpFocus(9)" />
                            元 -->
                        </div>
                    </div>

                </div>
                <div class="line_botom" :class="pitch==13?'pitch_line_h':''">

                </div>
            </div>
        </div>
        <div class="dis" v-if="list.djRepeSimStatus==0&&list.djRepeShowStatus==0">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">大机多次流量卡成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.djRepeSimCost" class="inp" @focus="InpFocus(14)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==14?'pitch_line_h':''">

                </div>
            </div>
        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">微智能首次流量卡</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.miFirstSimCost" class="inp" @focus="InpFocus(15)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==15?'pitch_line_h':''">

                </div>
            </div>

        </div>
        <div class="dis" v-if="list.miRepeShowStatus==0">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">微智能是否有多次流量卡</div>
                        <div class="dia flashlight" @click="intellect(16)">
                            <van-field v-model="intellectName" label="" input-align="right" placeholder="请选择"
                                :disabled="true" :clickable="true" :is-link="true" @click="intellect(16)" />
                            <!-- <input type="text" v-model="list.djFirstSimCost" class="inp" @focus="InpFocus(9)" />
                            元 -->
                        </div>
                    </div>

                </div>
                <div class="line_botom" :class="pitch==16?'pitch_line_h':''">

                </div>
            </div>
        </div>
        <div class="dis" v-if="list.miRepeShowStatus==0&&list.miRepeSimStatus==0">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">微智能多次流量卡</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.miRepeSimCost" class="inp" @focus="InpFocus(17)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==17?'pitch_line_h':''">

                </div>
            </div>
        </div>
        <div class="dis">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">押金成本</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="list.depositCost" class="inp" @focus="InpFocus(18)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="pitch==18?'pitch_line_h':''">

                </div>
            </div>
        </div>
        <div class="dis" v-for="(item,index) in list.activityList " :key="index">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">{{item.activityName}}</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="item.backAmount" class="inp" @focus="InpActive(index)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="activePitch==index?'pitch_line_g':''">

                </div>
            </div>

        </div>
        <div class="dis" v-for="(item,index) in list.activityList " :key="index">
            <div class="main">
                <div class="dia" style="justify-content: space-between;">
                    <div class="dia">
                        <div class="line" style="background-color: #ff5555;">

                        </div>
                        <div class="wx_box">{{item.activityName}}</div>
                    </div>
                    <div class="dia">
                        <input type="text" v-model="item.backAmount" class="inp" @focus="InpActive(index)" />
                        元
                    </div>
                </div>
                <div class="line_botom" :class="activePitch==index?'pitch_line_g':''">

                </div>
            </div>

        </div>

        <div class="dis" v-for="(item,index) in agentTemplateSubsidyRateList" :key="index"
            style="justify-content: center;">
            <!-- <van-swipe-cell style="padding-bottom: 4px;box-sizing: border-box;"> -->
            <!-- <div class="" > -->
            <div class="main_box" style="margin-top: 10px;margin-left: 2px;">
                <!-- 可以使用 CellGroup 作为容器 -->
                <!-- <van-cell-group inset> -->
                <van-field v-model="item.subsidyPeriod" label-width="100" label="补贴周期(天)" placeholder="请输入补贴周期"
                    input-align="right" :border="false" />
                <van-field v-model="item.subsidyRate" label-width="140" label="补贴费率(%)" placeholder="请输入补贴费率"
                    input-align="right" :border="false" />
                <!-- </van-cell-group> -->

            </div>
            <!-- <template #right>
					<van-button square type="danger" text="删除" style="height: 100%;"
						@click="beforeClose(item,index )" />
				</template> -->
            <!-- </div> -->

            <!-- </van-swipe-cell> -->
        </div>


        <div class="dis">
            <div class="allowance" @click="benefit">
                <div class="dis">
                    <div class="dis">
                        <img src="/src/assets/terminal/addition.png" alt="" />
                    </div>
                    <div class="collocate">
                        添加津贴配置
                    </div>
                </div>
            </div>
        </div>
        <div class="dis">
            <div class="btn_box">
                <div class="btn dis" @click="submit">
                    确定
                </div>
            </div>
        </div>

        <van-overlay :show="show" @click="show = false">
            <div class="wrapper_show">
                <van-picker title="" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
            </div>
        </van-overlay>
        <van-overlay :show="isshow" @click="isshow = false">
            <div class="wrapper_show">
                <van-picker title="" :columns="columns" @confirm="isonConfirm" @cancel="isonCancel" />
            </div>
        </van-overlay>
        <van-overlay :show="intellectShow" @click="intellectShow = false">
            <div class="wrapper_show">
                <van-picker title="" :columns="columns" @confirm="intellectConfirm" @cancel="intellectCancel" />
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import {
        selectUnderAgentRate,
        updateAgentChannelRate,

    } from '@/api/terminal'
    import store from '@/store'
    import {
        showToast
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRouter()
            const routers = useRoute()
            const state = reactive({
                list: {},
                show: false,
                columns: [{
                        text: '是',
                        value: '0'
                    },
                    {
                        text: '否',
                        value: '1'
                    }
                ],
                repeSimStatusName: "",
                djRepeSimStatusName: "",
                isshow: false,
                miRepeSimStatus: "",
                intellectShow: false,
                intellectName: ""
                // creditCardDrate: "",
                // ysfRate: "",
                // // activityList: [],
                // debitCardDrate: "",

                // casRate: "",
                // withdrawRateCost: "",
                // // backAmount:"",
                // largeZfbRate: "",
                // agentSubsidyRateConfigInfStr: [],
                // repeSimCost: "",
                // firstSimCost: "",
                // djFirstSimCost: "",
                // djRepeSimCost: ""
            })

            const info = reactive({
                pitch: 0,
                activePitch: -1,
                agentTemplateSubsidyRateList: [],
                // {
                // 	subsidyPeriod: "",
                // 	subsidyRate: ""
                // }
            })
            //取消大机是否有多次流量卡
            const isonCancel = () => {
                state.isshow = false
            }
            //取消电签是否有多次流量卡
            const onCancel = () => {
                state.show = false
            }

            //确认大机是否有多次流量卡
            const isonConfirm = ({
                selectedValues
            }) => {
                state.list.djRepeSimStatus = selectedValues.join(',')
                if (state.list.djRepeSimStatus == 0) {
                    state.djRepeSimStatusName = '是'
                } else {
                    state.djRepeSimStatusName = '否'
                }
            };
            //显示大机是否有多次流量卡
            const todjRepeSimStatus = () => {
                state.isshow = true
            }
            //确认电签是否有多次流量卡
            const onConfirm = ({
                selectedValues
            }) => {
                // showToast(`当前值: ${selectedValues.join(',')}`);
                state.list.repeSimStatus = selectedValues.join(',')
                if (state.list.repeSimStatus == 0) {
                    state.repeSimStatusName = '是'
                } else {
                    state.repeSimStatusName = '否'
                }
            };
            //电签是否有多次流量卡
            const torchlight = () => {
                state.show = true
            }
            //提交
            const submit = () => {
                console.log(state.list.agentSubsidyRateConfigInfStr)
                let dqRepeShowStatus = state.list.dqRepeShowStatus
                let djRepeShowStatus = state.list.djRepeShowStatus
                state.list.agentSubsidyRateConfigInfStr = []
                for (let i in info.agentTemplateSubsidyRateList) {
                    state.list.agentSubsidyRateConfigInfStr.push({
                        subsidyPeriod: info.agentTemplateSubsidyRateList[i].subsidyPeriod,
                        subsidyRate: info.agentTemplateSubsidyRateList[i].subsidyRate,
                    })
                }
                state.list.agentSubsidyRateConfigInfStr = JSON.stringify(state.list
                    .agentSubsidyRateConfigInfStr)
                if (state.list.agentSubsidyRateConfigInfStr.length == 0) {
                    delete state.list.agentSubsidyRateConfigInfStr
                }
                delete state.list.dqRepeShowStatus
                delete state.list.djRepeShowStatus
                state.list.zfbRate = state.list.wxRate
                state.list.debitCardDrate = state.list.creditCardDrate
                updateAgentChannelRate({
                    channelCode: routers.query.channelCode,
                    parentNo: store.state.user.agentNo,
                    agentNo: routers.query.serviceNo,
                    // activityId:routers.query.activityId,
                    ...state.list
                }).then(res => {
                    showToast('修改成功')
                    getList()
                }).catch(err => {
                    state.list.dqRepeShowStatus = dqRepeShowStatus
                    state.list.djRepeShowStatus = djRepeShowStatus
                })
            }

            //点击删除按钮
            const beforeClose = (item, index) => {
                // console.log(item)
                info.agentTemplateSubsidyRateList.splice(index, 1)
            };
            //输入框获得焦点
            const InpFocus = (e) => {
                info.pitch = e
                if (info.activePitch != -1) {
                    info.activePitch = -1
                }
                // console.log('聚焦', state.pitch)
            }
            const InpActive = (e) => {
                info.activePitch = e
                if (info.pitch != 0) {
                    info.pitch = 0
                }
                console.log(e)
            }
            //获取成本配置
            const getList = () => {
                console.log(routers.query, store.state.user.agentNo)
                selectUnderAgentRate({
                    channelCode: routers.query.channelCode,
                    // activityId: routers.query.activityId,
                    agentNo: routers.query.serviceNo,
                }).then(res => {
                    // state = [...state, ...res.data.activityList]
                    // state.list = res.data
                    state.list.creditCardDrate = res.data.creditCardDrate
                    state.list.ysfRate = res.data.ysfRate
                    // state.dcardCap = res.data.agentPosChannelRateConfigInf.dcardCap
                    state.debitCardDrate = res.data.creditCardDrate
                    state.list.casRate = res.data.casRate
                    state.list.withdrawRateCost = res.data.withdrawRateCost
                    state.list.largeZfbRate = res.data.largeZfbRate
                    info.agentTemplateSubsidyRateList = res.data.agentSubsidyRateConfigInfs
                    state.list.firstSimCost = res.data.firstSimCost
                    state.list.repeSimCost = res.data.repeSimCost
                    state.list.djFirstSimCost = res.data.djFirstSimCost
                    state.list.djRepeSimCost = res.data.djRepeSimCost
                    state.list.dqRepeShowStatus = res.data.dqRepeShowStatus
                    state.list.djRepeShowStatus = res.data.djRepeShowStatus
                    state.list.djRepeSimStatus = res.data.djRepeSimStatus
                    state.list.repeSimStatus = res.data.repeSimStatus
                    state.list.ccardTrateYx = res.data.ccardTrateYx
                    state.list.wxRate = res.data.wxRate
                    state.list.zfbRate = res.data.zfbRate
                    state.list.miFirstSimCost = res.data.miFirstSimCost
                    state.list.miRepeShowStatus = res.data.miRepeShowStatus
                    state.list.miRepeSimCost = res.data.miRepeSimCost
                    state.list.depositCost = res.data.depositCost
                    if (state.list.repeSimStatus == 0) {
                        state.repeSimStatusName = '是'
                    } else {
                        state.repeSimStatusName = '否'
                    }
                    if (state.list.djRepeSimStatus == 0) {
                        state.djRepeSimStatusName = '是'
                    } else {
                        state.djRepeSimStatusName = '否'
                    }
                    if (state.list.miRepeSimStatus == 0) {
                        state.intellectName = '是'
                    } else {
                        state.intellectName = '否'
                    }
                    // for (let i in res.data.agentSubsidyRateConfigInfs.length - 1) {
                    // 	state.agentTemplateSubsidyRateList.push({
                    // 		subsidyPeriod: res.data.agentSubsidyRateConfigInfs[i]
                    // 			.subsidyPeriod,
                    // 		subsidyRate: res.data.agentSubsidyRateConfigInfs[i].subsidyRate
                    // 	})
                    // }
                    // state.backAmount = res.data.backAmount
                })
            }
            //添加津贴
            const benefit = () => {
                // state.benefitIndex++
                console.log(info.agentTemplateSubsidyRateList)
                if (info.agentTemplateSubsidyRateList == null) {
                    info.agentTemplateSubsidyRateList = []
                }
                info.agentTemplateSubsidyRateList.push({
                    subsidyPeriod: "",
                    subsidyRate: ""
                })
            }
            getList()
            //微智能选择
            const intellect = () => {
                state.intellectShow = true
            }
            //微智能选择
            const intellectCancel = () => {
                state.intellectShow = false
            }
            //微只能是否有多次
            const intellectConfirm = ({
                selectedValues
            }) => {
                // showToast(`当前值: ${selectedValues.join(',')}`);
                state.list.miRepeSimStatus = selectedValues.join(',')
                if (state.list.miRepeSimStatus == 0) {
                    state.intellectName = '是'
                } else {
                    state.intellectName = '否'
                }
                state.intellectShow = false
            };
            return {
                ...toRefs(state),
                ...toRefs(info),
                InpActive,
                getList,
                InpFocus,
                submit,
                benefit,
                beforeClose,
                torchlight,
                onConfirm,
                isonCancel,
                onCancel,
                isonConfirm,
                todjRepeSimStatus,
                intellect,
                intellectCancel,
                intellectConfirm
            }
        }
    })
</script>
<style scoped lang="scss">
    .wrapper {
        background: #F9FBFF;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        padding-bottom: 32px;

        .main {
            width: 92%;
            // height: 54px;
            background: #FFFFFF;
            border-radius: 6px;
            margin-top: 12px;
            padding: 14px 12px 12px 12px;
            box-sizing: border-box;
            font-size: 12px;

            .flashlight {}

            ::v-deep .flashlight .van-cell {
                padding: 0 !important;
            }

            .inp {
                text-align: right;
                padding-right: 4px;
                width: 50px;
            }

            .line {
                width: 3px;
                height: 13px;
                background: #0257FF;
                border-radius: 2px;
            }

            .line_botom {
                margin-top: 8px;
                border-bottom: 1px solid #ccc;
            }

            .pitch_line {
                animation: animation1 0.6s ease-in forwards;
            }

            .pitch_line_a {
                animation: animation2 0.6s ease-in forwards;
            }

            .pitch_line_b {
                animation: animation3 0.6s ease-in forwards;
            }

            .pitch_line_c {
                animation: animation4 0.6s ease-in forwards;
            }

            .pitch_line_d {
                animation: animation5 0.6s ease-in forwards;
            }

            .pitch_line_e {
                animation: animation6 0.6s ease-in forwards;
            }

            .pitch_line_f {
                animation: animation7 0.6s ease-in forwards;
            }

            .pitch_line_g {
                animation: animation8 0.6s ease-in forwards;
            }

            .pitch_line_h {
                animation: animation9 0.6s ease-in forwards;
            }

            .pitch_line_i {
                animation: animation10 0.6s ease-in forwards;
            }

            .wx_box {
                margin-left: 12px;
                width: 200px;
            }

        }

        .wrapper_show {
            position: absolute;
            bottom: 0px;
            width: 100%;
        }

        .main_box {
            border-radius: 6px 6px 6px 6px;
            // box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            // padding: 5px 0px;
            box-sizing: border-box;
            width: 92%;
        }

        .allowance {
            border-radius: 6px 6px 6px 6px;
            // width: 366px;
            // box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            background-color: #fff;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FF2828;
            width: 92%;
            padding: 8px 0px;
            box-sizing: border-box;
            margin-top: 10px;

            .collocate {
                margin-left: 4px;
            }

            img {
                width: 16px;
                height: 16px;
            }
        }
    }

    @keyframes animation1 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation2 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation3 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation4 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation5 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation6 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation7 {
        0% {
            width: 0%;
            border-bottom: 1px solid red;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid red;
        }
    }

    @keyframes animation8 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation9 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    @keyframes animation10 {
        0% {
            width: 0%;
            border-bottom: 1px solid #ff5555;
        }

        100% {
            width: 100%;
            border-bottom: 1px solid #ff5555;
        }
    }

    .btn_box {
        // position: absolute;
        // left:50%;
        // bottom: 8%;
        width: 84%;
        // transform: translateX(-50%);
        margin-top: 32px;

        .btn {
            width: 100%;
            background-color: #0257FF;
            border-radius: 6px;
            padding: 12px 0px;
            font-size: 15px;
            color: #fff;
        }
    }
</style>